<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Prosody IM Webchat</title>
	<link rel="stylesheet" href="webchat.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="_local.css" type="text/css" media="screen" />
	<link rel="icon" href="/favicon.png" type="image/png" />
	
	<script type="text/javascript" src="strophe/b64.js"></script>
	<script type="text/javascript" src="strophe/md5.js"></script>
	<script type="text/javascript" src="strophe/sha1.js"></script>
	<script type="text/javascript" src="strophe/strophe.js"></script>

	<script type="text/javascript" src="browser_version.js"></script>
	<script type="text/javascript" src="ba-linkify.js"></script>
	<script type="text/javascript" src="muc_handler.js"></script>
	<script type="text/javascript" src="muc_ui.js"></script>

	<script type="text/javascript" src="_local.js"></script>
	
	<style type="text/css">
		body, html { overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100% }
	</style>
	<script type="text/javascript">
		var conn = new Strophe.Connection(window.xmpp_bosh ? window.xmpp_bosh : "/bosh");

		var nick = window.location.toString().match(/[?&#]nick=([^&#]*)/); //Allow taking #nick=(nickname) as well as the traditional URL-parameter method
		
		if(nick && nick[1] && nick[1].length > 0)
			nick = nick[1];

		if (nick && console && console.info)
			console.info('Nickname set to "' + nick + '"');

		var room = window.location.toString().match(/[?&]room=([^&@%]*)/);
		if(room && room[1] && room[1].length > 0)
		{
			room = room[1];
			if(room.indexOf('@')<2)
				room += window.xmpp_room.substring(window.xmpp_room.indexOf('@'))
			if (nick && console && console.info)
				console.info('Room set to "' + room + '"');
		}
		else
			room = window.xmpp_room ? window.xmpp_room : "test@conference.prosody.im";


		function version_handler(stanza)
		{
			conn.send($iq({to: stanza.getAttribute("from"), type: "result", id: stanza.getAttribute("id") })
				.c('query', { xmlns: "jabber:iq:version" })
					.c('name').t(BrowserDetect.browser).up()
					.c('version').t(BrowserDetect.version.toString() + ', Strophe lib fingerprint '+hex_md5(Strophe).substring(0,6) ).up()
					.c('os').t(BrowserDetect.OS).tree());
			return true;
		}
		
		function handle_connection_status(status, err)
		{
			if(err)
				alert(err);

			if(status == Strophe.Status.CONNECTED)
			{
				conn.addHandler(version_handler, null, "iq", "get", null, null);
				window.muc = create_muc_ui(conn, room, nick,
					{ message_log: document.getElementById('msglog')
					, input_box: document.getElementById('msginput').getElementsByTagName("input")[0]
					, occupant_list: document.getElementById('roster')
					, detect_focus: true, tab_completion: true
					}
				);
				var _dis = function () {
					if(!window.conn) return;
					window.conn.send($pres({to: room, type:"unavailable"}).c("status").t("Window closed"));
					window.conn.disconnect();
					window.conn = null;
				};

				addLoader("unload", _dis);
				addLoader("beforeunload", _dis);
				
				// Focus on entry box
				document.getElementById('msginput').focus();
				document.getElementById('msginput').select();
			}
			
		}

		function show_client()
		{
			document.getElementById('client').style.display = 'block';
		}

		function start_connection()
		{
			if(nick.length == 0) nick = "itriedtologinwithnonick";
			if(nick.length > 24) nick = nick.substr(0, 20);
			document.getElementById('nickchoose').style.display = 'none';
			show_client();
			conn.connect((window.xmpp_srv ? window.xmpp_srv : "anon.prosody.im"), null, handle_connection_status, 50);
		}
		
		function nickname_entered()
		{
			nick = document.getElementById('nickentry').value;
			if(nick.substring(0,5)!='guest') window.location.hash = '#nick=' + nick; //Save chosen nick in URL #, such that a bookmark of the chat page leads *straight back* into the chatroom(!)
			start_connection();
		}

		addLoader( "load", function ()
		{
			var showprompt = false;			
			var nickentry = document.getElementById('nickentry');
			
			if(nick == null)
			{
				showprompt = true;
				if(nickentry.value == '')
				{
					nick = "guest"+conn.getUniqueId();
					nickentry.value = nick;
				}
				else
				{
					nick = nickentry.value;
				}
			}
			else
				nickentry.value = nick;
			
			if(showprompt)
			{
				nickentry.focus();
				nickentry.onkeypress = function (e)
				{
					if( (window.event?window.event.keyCode:e.which) == 13 )
						nickname_entered();
				}
			}
			else
				start_connection();
		});
	</script>
</head>
<body>
	<div id="header">
		<p>
			<a href="http://prosody.im/">prosody</a><a href="http://code.google.com/p/prosody-webclient/">-webclient</a>
		</p>
		<img id="logo" src="/logo.png" />
	</div>
	<div id="nickchoose">
		<p id="what-name">What name will you use in the chat?</p>
		<p><span id="name-colon">Name:</span> <input id="nickentry" type="text" />&nbsp;<input type="submit" id="join" value="Join chat" onclick='nickname_entered()' /></p>
		<!--<p id="what-room">What chat room do you want to join?</p>
		<p><span id="room-colon">Room:</span> <input id="roomentry" type="text" /></p>-->
	</div>
	<table id="client" style="display:none;" border="0" cellpadding="0" cellspacing="0">
		<tr height="99%"><td width="99%">
		<div id="msglog">
		</div>
		</td><td valign="top" width="1%">
		<div id="roster"></div>
		</td></tr><tr height="1%"><td colspan="2" valign="bottom">
		<!--<br clear="all" />-->
		<div id="msginput">
			<input /><br />&nbsp;
		</div>
		</td></tr></table>
	</div>
</body>
</html>
